<template>
    <div style="height: 100%" @click.stop="(f) => f">
        <div class="bg_default p_20 h60">
            <span class="lar_font_size text-primary">{{ t('home.messageCenter') }}</span>
            <sup v-if="msgsNumber > 0">
                <span class="message-num position_a">
                    <span style="font-size: 10px; color: #ffffff; padding: 0 4px">
                        {{ msgsNumber > 99 ? '99+' : msgsNumber }}
                    </span>
                </span>
            </sup>
            <span class="fr cursor_p">
                <div
                    v-if="!isEditStatus"
                    class="edit_icon"
                    style="width: 16px; height: 16px"
                    @click="actionMessage"
                ></div>
                <span v-else style="color: #999999; font-size: 16px" @click="actionMessage">
                    {{ t('common.cancel') }}
                </span>
            </span>
        </div>
        <div v-if="msgsList.length > 0" class="message_list">
            <div
                v-for="item in msgsList"
                :key="item.id"
                style="display: flex; mix-height: 70px; border-top: 1px solid #ebebeb; cursor: pointer"
            >
                <!--            messageStatus 0未读1已读 content内容 active是否选中 expand是否打开-->
                <div v-if="isEditStatus" style="display: flex; padding: 20px" @click="checkedMessageActive(item)">
                    <div>
                        <div
                            v-if="item.active"
                            style="width: 16px; height: 16px; margin-top: 8px"
                            class="selected_icon"
                        ></div>
                        <div v-else style="width: 16px; height: 16px; margin-top: 8px" class="unselected_icon"></div>
                    </div>
                    <div style="margin-left: 10px">
                        <div>
                            <span
                                :class="item.messageStatus === 0 ? 'font_color_0' : 'font_color_1'"
                                style="font-size: 14px; width: 195px; display: inline-block"
                            >
                                {{ item.title }}
                            </span>
                            <span style="font-size: 12px; color: #999999">{{ item.createdTime }}</span>
                        </div>
                        <div>
                            <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                        </div>
                    </div>
                </div>
                <div v-else class="w_100" @click="checkedMessageExpand(item)">
                    <div class="w_100">
                        <div style="padding: 15px 20px 8px 20px" class="w_100">
                            <span
                                :class="item.messageStatus === 0 ? 'text-primary' : 'text-weaken'"
                                style="font-size: 14px; width: 195px; display: inline-block"
                            >
                                {{ item.title }}
                            </span>
                            <span style="font-size: 12px; color: #999999">{{ item.createdTime }}</span>
                            <span style="margin-left: 20px; display: inline-block">
                                <div v-if="item.expand" style="width: 16px; height: 16px" class="off_icon"></div>
                                <div v-else style="width: 16px; height: 16px" class="open_icon"></div>
                            </span>
                        </div>
                        <div
                            v-if="item.expand"
                            style="height: 110px; background-color: #ebebeb; padding: 10px 20px"
                            class="w_100"
                        >
                            <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                        </div>
                        <div v-else style="margin-left: 20px; margin-bottom: 15px">
                            <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="no_data_img"></div>
            <div style="text-align: center; color: #666666; font-size: 14px">
                <span>{{ t('home.noMessage') }}</span>
            </div>
        </div>
        <div class="message-box">
            <div style="margin: 0 10px; display: flex">
                <div style="width: 33%" @click="checkedAllMessage">
                    <div class="select_all_icon operate_icon"></div>
                </div>
                <div style="width: 33%" @click="setReadMessage">
                    <div class="read_icon operate_icon"></div>
                </div>
                <div style="width: 33%" @click="delMessage">
                    <div class="delete_icon operate_icon"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getAllMsg, getCount, deleteMsg, setMsg } from '@/api/api.query.util';
import { formatDateBeiJing } from '@/utils/utils';
import PubSub from 'pubsub-js';
import { t } from '@/i18n';

const msgsNumber = ref(0);
const msgsList = ref([]);
const isEditStatus = ref(false);

function initCount() {
    getCount({
        method: 'get',
        data: {},
    }).then((res) => {
        msgsNumber.value = res.result;
    });
}
initMsg();
initCount();
function getMsg() {
    const promise = new Promise((resolve) => {
        getAllMsg({
            method: 'get',
            data: {},
        }).then((res) => resolve(res));
    });
    return promise;
}
async function initMsg() {
    try {
        const res: any = await getMsg();
        msgsList.value = res.result;
        msgsList.value.forEach((item: any) => {
            item.expand = false;
            item.active = false;
            item.createdTime = formatDateBeiJing(item.createdTime, 'MM-dd hh:mm', 'UCT');
        });
    } catch (e) {}
}
function actionMessage() {
    if (msgsList.value.length === 0) return;
    if (isEditStatus.value) {
        msgsList.value.forEach((data: any) => {
            data.active = false;
        });
    }
    isEditStatus.value = !isEditStatus.value;
}
function checkedMessageActive(item: any) {
    item.active = !item.active;
}
function checkedMessageExpand(item: any) {
    msgsList.value.forEach((data: any) => {
        if (data !== item) {
            data.expand = false;
        }
    });
    item.expand = !item.expand;
    setMsg({
        method: 'post',
        data: {
            userIdList: [item.id],
        },
    }).then(() => {
        item.messageStatus = 1;
        initCount();
        PubSub.publish('initCount');
    });
}
function checkedAllMessage() {
    isEditStatus.value = true;
    msgsList.value.forEach((data: any) => {
        data.active = true;
    });
}

function getIdList() {
    const userIdList = [];
    msgsList.value.forEach((item) => {
        if (item.active) {
            userIdList.push(item.id);
        }
    });
    return userIdList;
}

function setReadMessage() {
    const userIdList = getIdList();
    if (userIdList.length === 0) return;
    setMsg({
        method: 'post',
        data: {
            userIdList,
        },
    }).then(() => {
        initMsg();
    });
}
async function delMessage() {
    const userIdList = getIdList();
    if (userIdList.length === 0) return;
    deleteMsg({
        method: 'post',
        data: {
            userIdList,
        },
    }).then(() => {
        initMsg();
    });
}
</script>

<style scoped>
.operate_icon {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 16px auto 0;
}
.message_list {
    height: calc(100% - 125px);
    overflow: auto;
    background-color: #ffffff;
}
.message_list::-webkit-scrollbar {
    width: 0 !important;
}
.no_data_img {
    background: url('~@/assets/image/no message@2x.png') no-repeat 0 / 106px;
    width: 98px;
    height: 106px;
    margin: 30px auto;
}
.message-num {
    height: 16px;
    line-height: 12px;
    display: inline-block;
    background-color: #fc526e;
    border-radius: 4px;
    min-width: 10px;
    top: 13px;
}
.message-box {
    height: 65px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #ebebeb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>
